<template>
    <div class="list-page">
        <tool-bar>
            <el-button>应用Code:{{ $props.appCode }}</el-button>
            <el-button @click="$data.add_dlg=true; $data.pNode={}; $data.node={};">添加</el-button>
        </tool-bar>

        <el-dialog v-model="$data.add_dlg" title="添加菜单">
            <menu-card-com v-model="$data.node" :app-code="$props.appCode" :pNode="$data.pNode" v-if="$data.add_dlg"
                           @done="it=> { $data.add_dlg=false;loadData(); }"/>
        </el-dialog>
        <my-list
            ref="list"
            :url="$data.url"
            @param="preload"
            @loaded="procData"
            :page-size="10"
            row-key="id"
            default-expand-all
            :tree-props="{children: 'menus',hasChildren: 'hasChildren'}"
            :store="true"
        >


            <el-table-column label="菜单名称" align="left" class-name="cell-flex" width="240">
                <template v-slot="scope">
                    <div class="link" @click="edit_click(scope.row)">{{ scope.row.name }}</div>
                </template>
            </el-table-column>

            <el-table-column label="英文" prop="enName" min-width="180"></el-table-column>
            <el-table-column align="left" label="菜单链接" prop="url" min-width="240"></el-table-column>
            <el-table-column align="left" label="code" prop="code" min-width="120"></el-table-column>
            <el-table-column align="center" label="排序" prop="sort" width="80"></el-table-column>
            <el-table-column label="操作" align="center" width="220">
                <template v-slot="scope">
                    <el-button @click="$data.add_dlg=true;$data.pNode=scope.row;$data.node={};" size="small" round>
                        添加子菜单
                    </el-button>
                    <el-button type="warning" plain round @click="delete_click(scope.row)" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
            <template #query="scope">
                <kv label="名称">
                    <el-input v-model="scope.query.name"></el-input>
                </kv>
            </template>
        </my-list>
    </div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2021-03-14 15:58:11
 */
import menuCardCom from "./app-menu-card.vue"




defineOptions({
    name: "app-menu",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();

const $props = defineProps({
    appCode: {type: String}
});

//定义data
const $data = reactive({
    url: '/sys/app-menu/list?edit=true&appCode=' + $props.appCode,
    add_dlg: false,
    pNode: {},
    node: {},
    tableData: {}
});




const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const preload = function (param) {
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
};
const procData = function (res) {
    $data.tableData = res.data;
    res.data.data.forEach(it => {
//如果是组合实体，设置 it.id=...
    });
};
const loadData = function (pageNumber) {
    list.value.loadData(pageNumber);
};
const getPNode = function (row) {
    var pNode;
    jv.recursionJson($data.tableData.data, (json, parent) => {
        if (json.id == row.id) {
            pNode = parent;
            return false;
        }
    });
    return pNode;
};
const edit_click = function (row) {
    //记录上次点击行
    var rowId = row.id;
    list.value.setLastRow(row);
    $data.pNode = getPNode(row);
    $data.node = JSON.clone(row);
    $data.add_dlg = true;
};
const delete_click = function (row) {
    var rowId = row.id;
    var rowName = row.name;
    jv.confirm('确认删除 ' + rowName + ' 吗？').then(res => {
        jv.$http.post("/sys/app-menu/delete/" + rowId + "?appCode=" + $props.appCode).then(res => {
//[axios拦截器中已处理了异常]。
            loadData();
        })
    });
};
const set_click = function (row) {
//设置事件
    var rowId = row.id;
};


</script>
